<template>
  <div
    class="box"
    :style="{
      top: size * position[0] + 'px',
      left: size * position[1] + 'px',
    }"
  ></div>
</template>

<script>
import { MOVE_1 } from "./constant";
export default {
  name: "Box",
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
    size: {
      type: Number,
      default: () => 80,
    },
    map: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      position: [],
    };
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        this.position = this.value.position.slice();
      },
    },
  },
  computed: {},
  created() {},
  methods: {
    move(direction) {
      let dir = MOVE_1[direction];
      this.$set(this.position, "0", this.position[0] + dir[0]);
      this.$set(this.position, "1", this.position[1] + dir[1]);
    },
  },
};
</script>

<style>

.box {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: yellow;
}
</style>
